<!-- Please remove this file from your project -->
<template>
  <div class="container">
    <div class="item"></div>
  </div>
</template>
<style>
* {
  margin: 0;
}
.container {
  display: flex;
  align-items: center;
  width: 1350px;
  height: 600px;
  margin: auto;
  background-color: #110820;
}
.item {
  margin: 0 auto;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  background: #e6e6e6;
  box-shadow: -10px -10px 30px #aabad4, 10px 10px 30px #e6fcff;
  animation: breathing 6s infinite;
  animation-direction: alternate;
}
@keyframes breathing {
  0% {
    box-shadow: -10px -10px 30px #aabad4, 10px 10px 30px #e6fcff;
  }

  50% {
    box-shadow: -10px -10px 40px #aabad4, 10px 10px 60px #e6fcff;
  }

  100% {
    box-shadow: -10px -10px 30px #aabad4, 10px 10px 30px #e6fcff;
  }
}
</style>